<template>
    <div class="main">
        <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px" label-width="68px">
            <el-form-item label="工单号" prop="workOrderNo">
                <el-input v-model="queryParams.workOrderNo" class="!w-240px" clearable placeholder="请输入工单号"
                    @keyup.enter="handleQuery" />
            </el-form-item>

            <el-form-item label="故障描述" prop="industryId">
                <el-input v-model="queryParams.mobile" class="!w-240px" clearable placeholder="请输入故障描述"
                    @keyup.enter="handleQuery" />
            </el-form-item>

            <el-form-item label="客户名称" prop="name">
                <el-input v-model="queryParams.name" class="!w-240px" clearable placeholder="请输入客户名称"
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="服务人员" prop="name">
                <el-input v-model="queryParams.name" class="!w-240px" clearable placeholder="请输入人员名称"
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="优先级" prop="level">
                <el-select v-model="queryParams.level" class="!w-240px" clearable placeholder="请选择优先级">
                    <el-option v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL)" :key="dict.value"
                        :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="工单状态" prop="source">
                <el-select v-model="queryParams.source" class="!w-240px" clearable placeholder="请选择工单状态">
                    <el-option v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE)" :key="dict.value"
                        :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="handleQuery">
                    <Icon class="mr-5px" icon="ep:search" />
                    搜索
                </el-button>
                <el-button @click="resetQuery">
                    <Icon class="mr-5px" icon="ep:refresh" />
                    重置
                </el-button>
                <el-button v-hasPermi="['crm:customer:create']" type="primary" @click="openForm('create')">
                    <Icon class="mr-5px" icon="ep:plus" />
                    新增
                </el-button>
                <el-button v-hasPermi="['crm:customer:import']" plain type="warning" @click="handleImport">
                    <Icon icon="ep:upload" />
                    导入
                </el-button>
                <el-button v-hasPermi="['crm:customer:export']" :loading="exportLoading" plain type="success"
                    @click="handleExport">
                    <Icon class="mr-5px" icon="ep:download" />
                    导出
                </el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="list">
            <el-table-column align="center" fixed="left" label="工单号" prop="workOrderNo" width="160">
                <template #default="scope">
                    <el-link v-if="scope && scope.row" :underline="false" type="primary"
                        @click="openDetail(scope.row.id)">
                        {{ scope.row.workOrderNo }}
                    </el-link>
                    <span v-else>无数据</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="工单类型" prop="workOrderType" width="100">
                <template #default="scope">
                    {{ scope && scope.row ? scope.row.workOrderType : '无数据' }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="故障类型" prop="workOrderFaultType" width="120" />
            <el-table-column align="center" label="故障描述" prop="workOrderFaultDescribed" width="130" />
            <el-table-column align="center" label="客户名称" prop="customerName" width="180" />
            <el-table-column align="center" label="联系电话" prop="customerContactNumber" width="135" />
            <el-table-column align="center" label="服务人员" prop="servicePersonnelName" width="135" />
            <el-table-column align="center" label="工单状态" prop="workOrderStatus" width="135" />
            <el-table-column align="center" label="优先级" prop="workOrderPriority" width="135" />
            <el-table-column align="center" label="提交时间" prop="commitTime" width="135" />
            <el-table-column align="center" label="服务时间" prop="serviceTime" width="135" />
            <el-table-column align="center" label="完成时间" prop="completionTime" width="135" />
            <el-table-column align="center" label="是否结算" prop="settlement" width="135" />
            <el-table-column align="center" label="成本价" prop="costPrice" width="135" />
            <el-table-column align="center" label="利润" prop="profit" width="135" />
            <el-table-column align="center" label="结算备注" prop="settlementNotes" width="135" />
            <el-table-column align="center" label="锁定状态" prop="lockedState">
            </el-table-column>
            <el-table-column align="center" label="创建人" prop="creator" width="100px" />
            <el-table-column align="center" fixed="right" label="操作" min-width="150">
                <template #default="scope">
                    <el-button v-hasPermi="['crm:customer:update']" link type="primary"
                        @click="openForm('update', scope.row.id)">
                        编辑
                    </el-button>
                    <el-button v-hasPermi="['crm:customer:delete']" link type="danger"
                        @click="handleDelete(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ElTable, ElTableColumn, ElLink } from 'element-plus'

const list = ref([])
const form = reactive({})
const loading = ref(false)

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  sceneType: '1', // 默认和 activeName 相等
  name: '',
  mobile: '',
  industryId: undefined,
  level: undefined,
  source: undefined,
  pool: undefined
})

console.log(form, list)

const openDetail = (id) => {
    console.log(id)
}

onMounted(() => {
    // 进入页面执行
});

onUnmounted(() => {
    // 页面卸载时执行
})
</script>

<style lang="scss" scoped>
.main {
    width: 100%;
    height: auto;
}
</style>